@import "./css/shared/a11y.css";
@import "./css/shared/buttons.css";
@import "./css/shared/forms.css";
@import "./css/shared/sort-by.css";
@import "./css/shared/typography.css";

/*
 * The `normalize.css` file does not use CSS layers, so we need to vendor it
 * with a layer to ensure it is applied before our global styles.
 */
@import "./css/normalize.css";

@layer global {
    :root, [data-theme="classic"] {
        --violet800: hsl(252, 44%, 24%);
        --grey900: hsl(200, 15%, 19%);
        --grey700: hsl(200, 11%, 43%);
        --grey600: hsl(200, 13%, 60%);
        --grey200: hsl(200, 17%, 96%);
        --green800: hsl(115, 31%, 31%);
        --green900: hsl(115, 31%, 21%);

        --orange-50: #fff7ed;
        --orange-100: #ffedd5;
        --orange-200: #fed7aa;
        --orange-300: #fdba74;
        --orange-400: #fb923c;
        --orange-500: #f97316;
        --orange-600: #ea580c;
        --orange-700: #c2410c;
        --orange-800: #9a3412;
        --orange-900: #7c2d12;

        --yellow100: hsl(44, 100%, 90%);
        --yellow500: hsl(44, 100%, 60%);
        --yellow700: hsl(44, 67%, 50%);
        --yellow800: hsl(44, 67%, 20%);
        --yellow900: hsl(44, 30%, 23%);

        --header-bg-color: light-dark(hsl(115, 31%, 20%), #141413);

        --transition-x-slow: 1000ms;
        --transition-slow: 500ms;
        --transition-medium: 250ms;
        --transition-fast: 150ms;
        --transition-x-fast: 50ms;
        --transition-instant: 0ms;

        --font-heading: "Fira Sans", sans-serif;
        --font-body: var(--font-heading);
        --font-monospace: "Fira Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
        "Courier New", monospace;

        --main-color: light-dark(#383838, #f9f7ec);
        --main-color-light: light-dark(#858585, #a6a6a6);
        --main-shadow-color: light-dark(var(--green900), hsl(111, 10%, 8%));
        --main-bg: light-dark(#f9f7ec, hsl(0, 1%, 19%));
        --main-bg-dark: light-dark(#edebdd, #141413);
        --gray-border: light-dark(#d5d3cb, #666561);
        --link-color: light-dark(#00ac5b, #04da75);
        --link-hover-color: light-dark(#007940, #00f27f);

        --placeholder-bg: hsl(212, 7%, 57%);
        --placeholder-bg2: hsl(213, 16%, 75%);

        /* see https://utopia.fyi/space/calculator?c=320,14,1.2,1140,18,1.25,5,2,&s=0.75|0.5|0.25|0.125,1.5|2|3|4|6,s-l */

        --space-4xs: clamp(0.13rem, calc(0.13rem + 0.00vw), 0.13rem);
        --space-3xs: clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem);
        --space-2xs: clamp(0.44rem, calc(0.39rem + 0.24vw), 0.56rem);
        --space-xs: clamp(0.69rem, calc(0.61rem + 0.37vw), 0.88rem);
        --space-s: clamp(0.88rem, calc(0.78rem + 0.49vw), 1.13rem);
        --space-m: clamp(1.31rem, calc(1.17rem + 0.73vw), 1.69rem);
        --space-l: clamp(1.75rem, calc(1.55rem + 0.98vw), 2.25rem);
        --space-xl: clamp(2.63rem, calc(2.33rem + 1.46vw), 3.38rem);
        --space-2xl: clamp(3.50rem, calc(3.11rem + 1.95vw), 4.50rem);
        --space-3xl: clamp(5.25rem, calc(4.66rem + 2.93vw), 6.75rem);

        /* One-up pairs */
        --space-4xs-3xs: clamp(0.13rem, calc(0.05rem + 0.37vw), 0.31rem);
        --space-3xs-2xs: clamp(0.25rem, calc(0.13rem + 0.61vw), 0.56rem);
        --space-2xs-xs: clamp(0.44rem, calc(0.27rem + 0.85vw), 0.88rem);
        --space-xs-s: clamp(0.69rem, calc(0.52rem + 0.85vw), 1.13rem);
        --space-s-m: clamp(0.88rem, calc(0.56rem + 1.59vw), 1.69rem);
        --space-m-l: clamp(1.31rem, calc(0.95rem + 1.83vw), 2.25rem);
        --space-l-xl: clamp(1.75rem, calc(1.12rem + 3.17vw), 3.38rem);
        --space-xl-2xl: clamp(2.63rem, calc(1.89rem + 3.66vw), 4.50rem);
        --space-2xl-3xl: clamp(3.50rem, calc(2.23rem + 6.34vw), 6.75rem);

        /* Custom pairs */
        --space-s-l: clamp(0.88rem, calc(0.34rem + 2.68vw), 2.25rem);

        color-scheme: light dark;
    }

    [data-color-scheme="light"] {
        color-scheme: light;
    }

    [data-color-scheme="dark"] {
        color-scheme: dark;
    }

    * {
        box-sizing: border-box;
    }

    html, body {
        margin: 0;
        scroll-behavior: smooth;
    }

    body {
        background-color: var(--header-bg-color);
        font-family: var(--font-body);
        font-size: 16px;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
    }

    h1, h2, h3, h4 {
        font-family: var(--font-heading);
    }

    h1 {
        @media only screen and (max-width: 400px) {
            font-size: 1.5em;
        }
    }

    a, .link, .text--link {
        color: var(--link-color);
        text-decoration: none;
        cursor: pointer;

        &:hover {
            color: var(--link-hover-color);
        }
    }

    /* Using `:not(...)` here for specificity reasons */
    a:not([href]) {
        color: unset;
        cursor: initial;
    }

    pre.terminal {
        background: var(--main-color);
        color: white;
        padding: var(--space-s);
        font-family: var(--font-monospace);
    }

    abbr[title] {
        text-decoration: none;
        border-bottom: 1px dotted;
    }

    noscript {
        display: grid;
        justify-items: center;
        padding: var(--space-m);
        color: white;
    }

    /* see https://github.com/twbs/bootstrap/pull/30269 */
    ::-webkit-datetime-edit,
    ::-webkit-datetime-edit-fields-wrapper,
    ::-webkit-datetime-edit-text,
    ::-webkit-datetime-edit-minute,
    ::-webkit-datetime-edit-hour-field,
    ::-webkit-datetime-edit-day-field,
    ::-webkit-datetime-edit-month-field,
    ::-webkit-datetime-edit-year-field {
        padding: 0;
    }

    ::-webkit-calendar-picker-indicator {
        font-size: 0.9em
    }

    .c-notification__icon {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .c-notification__content {
        line-height: 1.5;
    }

    .width-limit {
        width: 960px;
        @media only screen and (max-width: 960px) {
            width: 100%;
        }
    }
}
